import React = require("react");
import { MemberService } from "mobile/services/memberService";
import { ImageService } from "maishu-services-sdk";
import { BaseComponent } from "components/common/base-component";
import { component } from "components/common/component";

export interface State {
    store?: Store
}

export interface Props {
    type: 'displayLocation' | 'displayStoreName',
    showStoreLogo: boolean
}

@component({ displayName: "店铺顶栏", icon: "icon-map-marker", introduce: "在顶部显示购物车图标，显示用户位置" })
export class LocationBarControl extends BaseComponent<Props, State>{
    memberService: MemberService;
    imageService: ImageService;

    static defaultProps: Props = { type: "displayStoreName", showStoreLogo: true }

    constructor(props) {
        super(props);

        this.state = {};

        this.memberService = this.createService(MemberService);
        this.imageService = this.createService(ImageService);
    }

    componentDidMount() {
        this.memberService.store().then(store => {
            this.setState({ store: store })
        })
    }
    render() {
        /**
         * 要在控件设置和控件大小相关的样式，例如 padding，margin，height
         */
        let type = this.props.type;
        if (type == "displayLocation") {
            return this.renderLocation();
        }

        return this.renderStore();
    }

    renderStore() {
        let { store } = this.state;
        let { showStoreLogo } = this.props;
        return <div className="location-bar-store" style={{ padding: 14, height: 50 }}>
            <i className="icon-user pull-right"
                onClick={() => this.app.forward("user/index")}></i>
            <div className="position interception">
                {showStoreLogo ? <img style={{ width: 18, height: 18 }} className="img-circle"
                    src={this.imageService.imageSource(store ? store.ImagePath : "")} /> : null}
                <span>{store ? store.Name : ""}</span>
            </div>
        </div>
    }

    renderLocation() {
        return <div className="location-bar" style={{ padding: 14 }}>
            <i className="icon-user pull-right"
                onClick={() => this.app.redirect("user/index")}></i>
            <div className="position interception">
                <i className="icon-map-marker"></i>
                <span>暂时获取不到位置信息</span>
                <i className="icon-sort-down" style={{ margin: 0, position: 'relative', left: 6, top: -2 }}></i>
            </div>
        </div>
    }
}